<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link rel="stylesheet" href="../css/normalize.css" />
    <link rel="stylesheet" href="../css/global.css" />
    <link rel="stylesheet" href="../css/index.css" />
    <script>
      (function (doc, win, designWidth) {
        var html = doc.documentElement;
        function refreshRem() {
          var clientWidth = html.clientWidth;
          if (clientWidth >= designWidth) {
            html.style.fontSize = "100px";
          } else {
            html.style.fontSize = 100 * (clientWidth / designWidth) + "px";
          }
        }
        doc.addEventListener("DOMContentLoaded", refreshRem);
      })(document, window, 1080);
    </script>
  </head>

  <body>
    <div class="containe_login">
      <!-- 登录页面头部 -->
      <header class="login">
        <ul>
          <li><a href="#"></a></li>
          <li>登录</li>
          <li><a href="#">忘记密码</a></li>
        </ul>
      </header>
      <!-- 用户头像 -->
      <div class="user_pic">
        <img src="" alt="" />
      </div>
      <!-- 美团账号登录 -->
      <p class="meituan_login">美团账号登录</p>
      <!-- 表单 -->
      <form action="" class="user_input border_b">
        <div class="border_b">
          <label for="user_name">用户名：</label>
          <input
            type="text"
            placeholder="邮箱/手机号/用户名"
            id="user_name"
            autocomplete
          />
        </div>
        <div>
          <label for="user_password">密&nbsp;&nbsp;&nbsp;码：</label>
          <input
            type="password"
            placeholder="密码"
            id="user_password"
            autocomplete
          />
        </div>
      </form>
      <!-- 按钮组 -->
      <div class="submit">
        <form action="#">
          <button>登录</button>
        </form>
        <a href="#">立即注册</a>
        <a href="#">手机号快捷登录></a>
      </div>
      <!-- 底部第三方账号登录 -->
      <footer>
        <p>第三方账号登录</p>
        <ul>
          <li>
            <a href="#">
              <img src="../img/wx.png" alt="" />
              <span>微信</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../img/qq.png" alt="" />
              <span>QQ</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../img/wb.png" alt="" />
              <span>微博</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="../img/baidu.png" alt="" />
              <span>百度</span>
            </a>
          </li>
        </ul>
      </footer>
    </div>
  </body>
</html>
